---
import Root from "../layouts/Root.astro";
import NotFoundImage from "../components/NotFoundImage.astro";
import FontAwesomeIcon from "../components/FontAwesomeIcon.astro";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
---

<Root title="404 Not Found" description="404 Not Found">
  <Header />
  <div class="grow flex flex-col items-center justify-center">
    <main class="max-w-screen-sm mx-auto px-4 py-12 text-center">
      <h1 class="sr-only">404 Not Found</h1>
      <NotFoundImage
        class="inline-block h-auto w-full max-w-120 mb-4 px-8 box-border"
      />
      <p class="text-muted-foreground mb-4 text-lg sm:text-xl">
        The requested resource wasn't found. Double-check the URL if entered
        manually.
      </p>
      <div>
        <a href="/" class="btn btn-primary group">
          Return home
          <FontAwesomeIcon
            icon={faArrowRight}
            class="ml-2 !h-4 w-4 transition-transform group-hover:translate-x-1"
          />
        </a>
      </div>
    </main>
  </div>
  <Footer />
</Root>
